<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="甘忠祥">
    <title></title>
    <style>
        *{
            box-sizing: border-box;
        }
        a{
            color: inherit;
            font-size: inherit;
            text-decoration: none;
        }
        .box{
            display: flex;
        }
        .box>div{
            margin-left: 10px;
            position: relative;
        }
        a{
            display: inline-block;
            width: 19px;
            height: 19px;
            background-image: url('img/star.png');
        }
        a.active{
            background-position: 0 -28px;
        }
        .box>div:hover .pingjia{
            display: block;
        }
        .pingjia{
            border: 1px solid palevioletred;
            font-size: 12px;
            position: absolute;
            width: 120px;
            left: 0;
            top: 20px;
            display: none;
        }

    </style>
</head>

<body>
    <div class="box">
        <span>宝贝与描述相符</span>
        <div>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <div class="pingjia"></div>
        </div>
        <span class="result"></span>
    </div>
    
</body>
<script src="./jquery.min.js"></script>
<script>
$(function(){

    var index;
    var score;
    var isShow = true;

    var msg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];

    // 鼠标放上去改变，离开时变回来，需要 遍历
    function show(index){
        for(var i=0;i<5;i++){
            if(i<index){
                $('a').eq(i).addClass('active');
            }else{
                $('a').eq(i).removeClass('active');//???
            }
        }
    }
    // 星级触摸事件
    $('.box div').on('mouseover','a',function(){
        $('.pingjia').show().css('left',$(this).position().left);
        $('.pingjia').html(msg[$(this).index()]);
        index = $(this).index() + 1;
        show(index);
    });
    // 星级点击事件
    $('.box div').on('click','a',function(){
        score = $(this).index() + 1;
        $('.result').html('<strong style="color:red;">'+ score +'分 </strong>'+msg[$(this).index()].split('|')[1]);
        
    });
    $('.box div').on('mouseout','a',function(){
            console.log('鼠标出去');
            $('.pingjia').hide();
            show(score);
        });
});
</script>
</html>